node.js + gulp + sass + watch

1. https://nodejs.org/en/
2. [Recommended For Most Users 버튼] 다운로드 & 실행
3. 피니쉬가 나올때까지 다음 ~ 다음 ~ 다음
4. 커맨트창(WIN+R cmd) >

   node --version

5. vx.xx.x 라고 나오면 설치완료

상세 : http://programmingsummaries.tistory.com/356

요약

1. 파일 탐색기 > 프로젝트경로.../static 폴더 쉬프트 + 우클릭 > 여기서 명령창 열기

2. ...\webapp\static\ 상태에서

   npm init

   정보는 이름정도만 엔터 엔터 엔터 ~

   is this ok? 나오면

   yes

3. 실행 : 걸프 최초 설치시(시스템에 설치됨)에만

   npm install gulp -g

4. 실행

   npm install gulp --save-dev

5. 실행

   npm install browser-sync gulp-autoprefixer gulp-concat gulp-livereload gulp-minify-html gulp-sass gulp-sourcemaps gulp-uglify gulp-webserver --save-dev

6. 파일생성 gulpfile.js
7. 복사하여 gulpfile.js 저장 var gulp = require('gulp'); var sourcemaps = require('gulp-sourcemaps'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var minifyhtml = require('gulp-minify-html'); var sass = require('gulp-sass'); var livereload = require('gulp-livereload'); var paths = { js: '/js/*.js', scss: '/scss/*.scss', html: '/**/*.html' }; var sassOptionsCompact = {errLogToConsole: true, outputStyle: 'compact'}; var sassOptionsExpanded = {errLogToConsole: true, outputStyle: 'expanded'}; var browserSync = require('browser-sync').create(); gulp.task('serverbrowserSync', function () { return browserSync.init({ server: { baseDir: '../', index: "static/guide/bos/dashboard.html" } }); }); gulp.task('commons-sass', function () { return gulp.src('commons/common.scss') .pipe(sass(sassOptionsCompact).on('error', sass.logError)) .pipe(gulp.dest('commons/')); console.log('file change'); done(); }); gulp.task('default', [ 'bos-compile-sass', 'site1-compile-sass', 'watch' ]); var bos = 'bos'; gulp.task('bos-compile-sass', function () { return gulp.src(bos+paths.scss) .pipe(sourcemaps.init({loadMaps: true})) .pipe(sass(sassOptionsExpanded).on('error', sass.logError)) .pipe(sourcemaps.write()) .pipe(gulp.dest(bos+'/css/')); }); var site1 = 'ucms'; gulp.task('site1-compile-sass', function () { return gulp.src(site1+path.scss) .pipe(sourcemaps.init({loadMaps: true})) .pipe(sass().on('error', sass.logError)) .pipe(sourcemaps.write()) .pipe(gulp.dest(site1+'/css/')); console.log('site1 change'); }); var autoprefixer = require('gulp-autoprefixer'); gulp.task('autoPrefixer', function () { return gulp.src(['bos/css/*.css']) .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: true })) .pipe(gulp.dest('bos/css')); }); gulp.task('watch', function () { gulp.watch([boscss], ['bos-compile-sass']); gulp.watch([site1], ['site1-compile-sass']); //gulp.watch(['commons/common.scss'], ['commons-sass']); });
8. command창 ...\webapp\static\ 상태에서 실행

   gulp

1. 폴더구조

   scss 폴더의 파일을 css폴더로 컴파일

2. 사이트가 여러개인경우 gulpfile.js에서 각 "site1"을 복사하여 site2로 추가한다.

1. _(언더바가 붙은 파일)은 컴파일 되지 않는다.
2. 콜솔창을 닫으면 watch가 중단되고 컴파일이 되지 않는다.
3. 콘솔창에서 에러가 뜨면은 css파일이 정상적으로 생성 되지 않는다.
4. 파일명.sass 과 scss 차이점은 구문 작성 방법 차이 우리는 scss를 사용하는것으로 한다. sass와 scss차이점
5. Sass(CSS Preprocessor) 기초
6. sass web compiler